<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加文章</title>
    <link rel="stylesheet" href="{__CSS__}/element_ui.css"/>
    <link rel="stylesheet" href="{__CSS__}/style.css"/>
    <script src="{__JS__}/vue2.js"></script>
    <script src="{__JS__}/element_ui.js"></script>
    <script src="{__JS__}/axios.min.js"></script>
    <script src="{__JS__}/request.js"></script>
</head>
<body>
{include file="/components/fileSelect"}
{include file="/components/ueditor"}
<div id="app">
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span @click="goBack()" style="cursor: pointer;color: #66b1ff">&lt; 返回</span>
            <el-divider direction="vertical"></el-divider>
            <span>添加文章</span>
        </div>
        <el-form :model="form" label-width="80px" :rules="rules" ref="ruleForm">
            <el-form-item label="文章标题" prop="title">
                <el-input v-model="form.title" style="width: 500px"></el-input>
            </el-form-item>
            <el-form-item label="所属分类" prop="cate_id">
                <el-select v-model="form.cate_id" placeholder="请选择" style="width: 500px">
                    <el-option
                        v-for="item in articleCate"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="文章描述" prop="desc">
                <el-input type="textarea" rows="3" v-model="form.desc" style="width: 500px"></el-input>
            </el-form-item>
            <el-form-item label="文章内容" prop="content">
                <ueditor @input="ueditorContent"></ueditor>
            </el-form-item>
            <el-form-item label="seo标题">
                <el-input v-model="form.seo_title" style="width: 500px"></el-input>
            </el-form-item>
            <el-form-item label="seo描述">
                <el-input v-model="form.seo_desc" style="width: 500px"></el-input>
            </el-form-item>
            <el-form-item label="seo关键词">
                <el-input v-model="form.seo_keywords" style="width: 500px"></el-input>
            </el-form-item>
            <el-form-item label="">
                <el-button @click="goBack" size="small">取 消</el-button>
                <el-button type="primary" @click="addSubmit('ruleForm')" size="small" :loading="loading">确 定
                </el-button>
            </el-form-item>
        </el-form>
    </el-card>
</div>
<script>

    new Vue({
        el: '#app',
        data: function () {
            return {
                articleCate: {},
                baseIndex: '/{:config("shop.backend_index")}/',
                form: {
                    title: '',
                    cate_id: '',
                    desc: '',
                    content: '',
                    seo_title: '',
                    seo_desc: '',
                    seo_keywords: ''
                },
                loading: false,
                rules: {
                    title: [
                        {required: true, message: '请输入文章标题'}
                    ],
                    cate_id: [
                        {required: true, message: '请选择所属分类'}
                    ],
                    desc: [
                        {required: true, message: '请输入文章描述'}
                    ],
                    content: [
                        {required: true, message: '请输入文章内容'}
                    ],
                }
            }
        },
        mounted() {
            console.log(window.location.href)
            this.getArticleCate()
        },
        methods: {
            // 获取分类信息
            async getArticleCate() {
                let res = await request.get(this.baseIndex + 'article/add')
                this.articleCate = res.data
            },
            // 提交文章
            addSubmit(formName) {
                this.$refs[formName].validate(async (valid) => {
                    if (valid) {
                        this.loading = true
                        let res = await request.post(this.baseIndex + 'article/add', this.form)
                        this.loading = false
                        if (res.code == 0) {
                            this.$message.success(res.msg)
                            setTimeout(() => {
                                window.location.href = this.baseIndex + 'article/index'
                            }, 500)
                        } else {
                            this.$message.error(res.msg)
                        }
                    }
                });
            },
            ueditorContent(content) {
                this.form.content = content
            },
            goBack() {
                history.go(-1)
            }
        }
    })
</script>
</body>
</html>